<template>
<el-form ref="ruleFormRef" style="width: 600px;margin: auto;" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>

    <el-form-item label="用户名" prop="userName">
      <el-input v-model="form.userName" />
    </el-form-item>

    <el-form-item label="性别">
      <el-radio-group v-model="form.gender">
      <el-radio :value="true" size="large">男</el-radio>
      <el-radio :value="false" size="large">女</el-radio>
    </el-radio-group>
    </el-form-item>

    <el-form-item label="所在部门" prop="departmentId">
      <el-select v-model="form.departmentId" placeholder="请选择部门">
        <el-option label="IT信息部" :value="1" />
        <el-option label="人力资源部" :value="2" />
        <el-option label="财务部" :value="3" />
        <el-option label="销售部" :value="4" />
        <el-option label="行政部" :value="5" />
      </el-select>
    </el-form-item>

    <el-form-item label="所在地址" prop="provinceId" >
      <el-select v-model="form.provinceId" placeholder="请选择省份" @change="getCity">
        <el-option v-for="item in provinceData" :key="item.provinceId" :label="item.provinceName" :value="item.provinceId" />
      </el-select>
      &nbsp;&nbsp;
      <el-select v-model="form.cityId" placeholder="请选择城市" @change="getCounty">
        <el-option v-for="item in cityData" :key="item.cityId" :label="item.cityName" :value="item.cityId" />
      </el-select>
      &nbsp;&nbsp;
      <el-select v-model="form.countyId" placeholder="请选择县">
        <el-option v-for="item in countyData" :key="item.countyId" :label="item.countyName" :value="item.countyId" />
      </el-select>
    </el-form-item>

    <el-form-item label="详细地址" prop="address">
      <el-input v-model="form.address" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute();
const router = useRouter();

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
onMounted(() => {
  getProvince()
  getCity()
  getCounty()
})
const form: any = reactive({
  userName: '',
  gender: true,
  provinceId: '',
  cityId: '',
  countyId: '',
  address: '',
  departmentId:''
})

//校验规则
const rules = reactive<FormRules>({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  address: [
    { required: true, message: '请输入详细地址', trigger: 'blur' },
  ],
  departmentId: [
    { required: true, message: '请选择部门', trigger: 'blur' },
  ],
  provinceId: [
    { required: true, message: '请选择所在地址', trigger: 'blur' },
  ],
})

//省
const provinceData:any=ref([]) 
const getProvince = () => {
  axios.get('/api/ProvinceManagement/GetProvinces').then(res => {
    //console.log(res);
    provinceData.value = res.data.data;
  }).catch(err => {
    console.log(err);

  })
}
  
//市
const cityData:any=ref([]) 
const getCity = () => {
  //清空
  form.cityId = '';
  form.countyId = '';

  axios.get('/api/CityManagement/GetCities', {
    params: {
      provinceId: form.provinceId || null
    }
  }).then(res => {
    //console.log(res);
    cityData.value = res.data.data;
  }).catch(err => {
    console.log(err);

  })
}

//县
const countyData: any = ref([]) 
const getCounty = () => {
  //清空
  form.countyId = '';
  axios.get('/api/CountyManagement/GetCounties', {
    params: {
      cityId: form.cityId || null
    }
  }).then(res => {
    //console.log(res);
    countyData.value = res.data.data;
  }).catch(err => {
    console.log(err);

  })
}  

  //保存
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let userData: any = {
        userName: form.userName,
        departmentId:form.departmentId,
        provinceId: form.provinceId,
        cityId: form.cityId,
        countyId: form.countyId,
        gender:form.gender,
        address: form.address,
      }
      axios.post('/api/UserManagemement/AddUser', userData).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          ElMessage.success("保存成功!")
          router.push({
            'name':'UserInfoLogin'
          })
        } else if (res.data.code == -2) {
          ElMessage.error("该用户名已存在.请重新输入")
          return
        } else {
          ElMessage.error("保存失败!")
          return
        }
      }).catch(err => {
        console.log(err);

      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>

<style scoped>

</style>